<template>
  <div>
    <!-- 查询表单 -->
    <div>
      <el-form
        :inline="true"
        :model="searchModel.data"
        class="demo-form-inline"
      >
        <el-form-item label="名称">
          <el-input
            v-model.trim="searchModel.iconName"
            placeholder="请输入名称"
          />
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="searchModel.forbiddenType" placeholder="请选择">
            <el-option label="全部" :value="null" />
            <el-option label="禁用" value="1" />
            <el-option label="启用" value="0" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" color="#ea5b24" @click="search()">
            查询
          </el-button>
        </el-form-item>
        <el-form-item>
          <el-button
            type=" primary"
            color="#ea5b24"
            @click="addPage()"
            v-if="pinia.isShow[57]"
            >添加</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <!-- 列表 -->
    <div>
      <el-table :data="tableData.data" style="width: 100%">
        <el-table-column prop="sort" width="60" label="排序" />
        <el-table-column prop="iconName" width="100" label="名称" />
        <el-table-column prop="iconUrl" label="图标链接" />
        <el-table-column prop="onlineType" width="80" label="是否上线">
          <template #default="scope">
            {{ scope.row.onlineType == 0 ? "否" : "是" }}
          </template>
        </el-table-column>
        <el-table-column prop="jumpOutside" width="110" label="是否跳转外部">
          <template #default="scope">
            {{ scope.row.jumpOutside == 0 ? "否" : "是" }}
          </template>
        </el-table-column>
        <el-table-column prop="jumpType" width="80" label="跳转方式">
          <template #default="scope">
            {{ scope.row.jumpType == 1 ? "动态" : "固定" }}
          </template>
        </el-table-column>
        <el-table-column prop="jumpUrl" label="跳转地址" />
        <el-table-column prop="bubbleType" width="130" label="是否增加小气泡">
          <template #default="scope">
            {{ scope.row.bubbleType == 0 ? "否" : "是" }}
          </template>
        </el-table-column>
        <el-table-column prop="bubbleText" width="160" label="小气泡文案" />
        <el-table-column prop="forbiddenType" width="60" label="状态">
          <template #default="scope">
            {{ scope.row.forbiddenType == 0 ? "启用" : "禁用" }}
          </template>
        </el-table-column>
        <el-table-column fixed="right" width="160" label="操作">
          <template v-slot:default="scope">
            <el-button
              link
              type="primary"
              size="small"
              @click="editPage(scope.row)"
              v-if="pinia.isShow[58]"
              >编辑</el-button
            >
            <el-button
              link
              type="primary"
              size="small"
              @click="disable(scope.row)"
              v-if="pinia.isShow[59]"
            >
              {{ scope.row.forbiddenType == 0 ? "禁用" : "启用" }}</el-button
            >
            <el-button
              link
              type="primary"
              size="small"
              @click="remove(scope.row.id)"
              v-if="pinia.isShow[60]"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <!--添加/编辑管理员表单 -->
      <el-dialog
        v-model="dialogVisible"
        :title="dialogTitle"
        center="true"
        modal="true"
        width="500px"
        class="el-dialog-data"
      >
        <el-form :model="model" :rules="rules" ref="ruleFormRef">
          <el-form-item label="名称:" prop="iconName">
            <el-input v-model.trim="model.iconName" autocomplete="off" />
          </el-form-item>
          <el-form-item label="图标URL:" prop="iconUrl">
            <el-input
              type="textarea"
              v-model.trim="model.iconUrl"
              :autosize="{ minRows: 2, maxRows: 3 }"
              autocomplete="off"
            />
          </el-form-item>
          <el-form-item label="是否上线:">
            <el-radio-group v-model="model.onlineType">
              <el-radio :label="0">否</el-radio>
              <el-radio :label="1">是</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="是否跳转外部:">
            <el-radio-group v-model="model.jumpOutside">
              <el-radio :label="0">否</el-radio>
              <el-radio :label="1">是</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="跳转方式:">
            <el-radio-group v-model="model.jumpType">
              <el-radio :label="1">动态跳转</el-radio>
              <el-radio :label="2">固定跳转</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="动态地址类型:" v-if="model.jumpType == 1">
            <el-radio-group v-model="model.dynamicAddrType">
              <el-radio :label="1">能链</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="跳转地址:" v-else>
            <el-input
              type="textarea"
              :autosize="{ minRows: 2, maxRows: 3 }"
              v-model.trim="model.jumpUrl"
              autocomplete="off"
            />
          </el-form-item>
          <el-form-item label="小气泡:">
            <el-radio-group v-model="model.bubbleType">
              <el-radio :label="1">增加</el-radio>
              <el-radio :label="0">不增加</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="小气泡文案:" v-if="model.bubbleType == 1">
            <el-input v-model="model.bubbleText" autocomplete="off" />
          </el-form-item>
          <el-form-item label="排序:">
            <el-input
              v-model.trim="model.sort"
              :formatter="(value) => value.replace(/[^\d]/g, '')"
              autocomplete="off"
            />
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button
              type="primary"
              color="#ea5b24"
              @click="formSubmit(ruleFormRef)"
              >保存</el-button
            >
          </span>
        </template>
      </el-dialog>

      <!-- 分页插件 -->
      <div style="text-align: center">
        <el-pagination
          :total="totalNum"
          @current-change="handleCurrentChange"
          background
          :page-size="size"
          layout="prev, pager, next, total"
          :current-page="page"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";
import { ElMessage, FormInstance, FormRules } from "element-plus";
import {
  findDriverIconApi,
  addDriverIconApi,
  editDriverIconApi,
  delDriverIconApi,
  batchDriverIconApi,
} from "../../../api/index";
import { usePermissStore } from "../../../store/permiss";
const pinia = usePermissStore();

//表单校验
const ruleFormRef = ref<FormInstance>();
const rules = reactive<FormRules>({
  iconName: [{ required: true, message: "请输入名称", trigger: "blur" }],
  iconUrl: [{ required: true, message: "请输入图标URL", trigger: "blur" }],
});

// 分页列表数据
let tableData: any = reactive([]);
const totalNum = ref(0);
const page = ref(1);
const size = 8;

// 控制添加/编辑对话框
const dialogVisible = ref(false);
const dialogTitle = ref("");
const dialogType = ref(0);

//搜素模型
const searchModel: any = reactive({
  iconName: null,
  forbiddenType: null,
  page: page,
  size: size,
});
//添加编辑模型
const model = reactive({
  id: null,
  bubbleText: null,
  bubbleType: null,
  iconName: null,
  iconUrl: null,
  jumpOutside: null,
  jumpType: null,
  jumpUrl: null,
  onlineType: null,
  dynamicAddrType: null,
  sort: null,
});

// 翻页
let flipData = reactive({
  page: page,
  size: size,
});
const handleCurrentChange = (val: number) => {
  page.value = val;
  flipData.page = page.value;
  searchPage(flipData);
};

// 添加角色点击事件
const addPage = () => {
  dialogTitle.value = "添加";
  ruleFormRef.value ? ruleFormRef.value.clearValidate() : false;
  dialogType.value = 0;
  dialogVisible.value = true;
  Object.keys(model).forEach((key) => (model[key] = ""));
  model.dynamicAddrType = 1;

  model.jumpOutside = 0;
  model.jumpType = 2;
  model.onlineType = 0;
  model.bubbleType = 0;
};

// 编辑角色点击事件
const editPage = (row) => {
  dialogTitle.value = "编辑";
  ruleFormRef.value ? ruleFormRef.value.clearValidate() : false;
  dialogType.value = 1;
  dialogVisible.value = true;

  model.dynamicAddrType = 1;

  model.id = row.id;
  model.bubbleText = row.bubbleText;
  model.bubbleType = row.bubbleType;
  model.iconName = row.iconName;
  model.iconUrl = row.iconUrl;
  model.jumpOutside = row.jumpOutside;
  model.jumpType = row.jumpType;
  model.jumpUrl = row.jumpUrl;
  model.onlineType = row.onlineType;
  model.sort = row.sort;
};

// 条件搜索代理
const search = () => {
  page.value = 1;
  searchParmSearch();
  searchPage(searchModel);
  flipData = JSON.parse(JSON.stringify(searchModel));
};

// 搜索参数检查
const searchParmSearch = () => {
  Object.keys(searchModel).forEach((key) => {
    if (!searchModel[key]) {
      searchModel[key] = null;
    }
  });
};

// 查询车主页面配置
const searchPage = (searchModel) => {
  findDriverIconApi(searchModel).then((res) => {
    if (res.data.code === 2000) {
      tableData.data = res.data.data.data;
      totalNum.value = res.data.data.total;
    } else {
      ElMessage.error("查询失败");
    }
  });
};

/**
 * 添加/编辑
 */
const formSubmit = (formEl) => {
  if (!formEl) return;
  formEl.validate((valid) => {
    if (valid) {
      if (dialogType.value === 0) {
        model.sort = Number(model.sort);
        addDriverIconApi(model).then((res) => {
          if (res.data.code === 2000) {
            ElMessage({
              message: "添加成功.",
              type: "success",
            });
            searchPage(searchModel);
          } else {
            ElMessage.error("添加失败");
          }
        });
      } else {
        editDriverIconApi(model).then((res) => {
          if (res.data.code === 2000) {
            ElMessage({
              message: "编辑成功.",
              type: "success",
            });
            searchPage(searchModel);
          } else {
            ElMessage.error("编辑失败");
          }
        });
      }
      Object.keys(model).forEach((key) => (model[key] = ""));
      dialogVisible.value = false;
    } else {
      return false;
    }
  });
};

// 删除车主页面配置
const remove = (id) => {
  delDriverIconApi([id]).then((res) => {
    if (res.data.code === 2000) {
      ElMessage({
        message: "删除成功.",
        type: "success",
      });
      searchPage(searchModel);
    } else {
      ElMessage.error("删除失败");
    }
  });
};

// 禁用车主页面配置
const disable = (row) => {
  batchDriverIconApi({
    ids: [row.id],
    state: Number(!row.forbiddenType),
  }).then((res) => {
    if (res.data.code === 2000) {
      ElMessage({
        message: "成功.",
        type: "success",
      });
      searchPage(searchModel);
    } else {
      ElMessage.error("失败");
    }
  });
};

onMounted(() => {
  searchPage(searchModel);
});
</script>
<style lang="less">
.el-dialog-data {
  padding: 0 40px;
}
</style>
